<template>
	<div>
		<el-form :inline="true" size="mini">
			<el-form-item>
				<el-input v-model="keyword" placeholder="请输入商品名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">查询商品</el-button>
				<el-button type="primary" @click="insert">新增商品</el-button>
				<el-button type="primary" @click="insertType">新增商品类别</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="pageInfo.list" style="100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection"></el-table-column>
			<el-table-column label="商品ID" prop="id" width="80"></el-table-column>
			<el-table-column label="商品名称" prop="goodsname" width="100"></el-table-column>
			<el-table-column label="商品所属类别" prop="goodstype.goodstype" width="80"></el-table-column>
			<el-table-column label></el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button type="primary" @click="handleTypeEdit(scope)" size="mini">编辑</el-button>
					<el-button type="danger" size="mini" @click="handleTypeDel(scope)">删除</el-button>					
				</template>
			</el-table-column>
			
		</el-table>
		<div class="delAndPage">
			<el-button type="danger" :disabled="ids.length==0" size="mini" @click="batchDel">批量删除</el-button>
			<el-pagination
				layout="prev,pager,next,total,jumper,sizes"			
				:total="pageInfo.total"
				:page-size="pageInfo.pageSize"
				:page-count="pageInfo.navigatePages"
				:page-sizes="[5,10,15,20]"
				:current-page="pageInfo.pageNum"
				background
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</div>
		
		<el-dialog :visible.sync="goodsAdd" title="新增商品" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="商品名称:">
					<el-input v-model="addtype.goodsname"></el-input>
				</el-form-item>
				<el-form-item label="商品所属类别:">
					<el-select v-model="addtype.goodstype.id">
						<el-option
							v-for="item in typeList"
							:key="item.id"
							:label="item.goodstype"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<br>
				<el-form-item>
					<el-button size="mini" @click="saveadd()" type="primary">保存</el-button>
					<el-button size="mini" @click="cancel()" type="warning">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<el-dialog :visible.sync="goodsEdit" title="编辑商品" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="商品名称:">
					<el-input v-model="type.goodsname"></el-input>
				</el-form-item>
				<el-form-item label="商品所属类别:">
					<el-select v-model="type.goodstype.id">
						<el-option
							v-for="item in typeList"
							:key="item.id"
							:label="item.goodstype"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<br>
				<el-form-item>
					<el-button size="mini" @click="savea()" type="primary">保存</el-button>
					<el-button size="mini" @click="cancela()" type="warning">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<el-dialog :visible.sync="goodsTypeAdd" title="新增商品类别" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="商品类别名称:">
					<el-input v-model="gtype.goodstype" style="width: 100px;"></el-input>
				</el-form-item><br>
				<el-form-item>
					<el-button size="mini" @click="saveg()" type="primary">保存</el-button>
					<el-button size="mini" @click="cancelg()" type="warning">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				pageInfo:{
					pageNum:1,
					pageSize:5
				},
				keyword:"",
				type:{
					goodstype:{}
				},
				goodsAdd:false,
				goodsEdit:false,
				addtype:{
					goodstype:{}
				},
				goodsTypeAdd:false,
				gtype:{
					id:"",
					goodstype:""
				},
				typeList:[],
				ids:[],
				t:{}
			}
		},
		created(){
			this.showData(1,this.pageInfo.pageSize,this.keyword);
		},
		methods:{
			showData(pageNum,pageSize,keyword){
				let url = "goods/getPaged";
				let params = `pageNum=${pageNum}&pageSize=${pageSize}&keyword=${keyword}`;
				axios.post(url,params).then(resp=>{
					this.pageInfo = resp.data.data;
					// console.log(resp.data.data);
				});
			},
			search(){
				this.showData(1,this.pageInfo.pageSize,this.keyword);
			},
			savea(){
				let url = "goods/update";
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){
						console.log("upcg");
						this.t.goodsname = this.type.goodsname;
						this.t.goodstypeid = this.type.goodstypeid;
					}
				});
				
				this.goodsEdit = false;
				// console.log(this.pageInfo);
				this.showData(this.pageInfo.pageNum,this.pageInfo.pageSize,this.keyword);
			},
			cancel(){
				this.goodsAdd = false;
			},
			cancela(){
				this.goodsEdit = false;
			},
			handleTypeEdit(scope){
				this.getAll();
				this.goodsEdit = true;
				this.t = scope.row;
				// console.log(scope.row);
				// this.$set(scope.row,"edit",true);
				//对象克隆
				this.type = {...scope.row};
			},
			handleTypeDel(scope){
				this.$confirm("是否删除","提示").then(()=>{
					let url = "goods/typeDel";
					axios.post(url,`id=${scope.row.id}`).then(resp=>{
						if(resp.data.data == 1){
							this.$alert("删除成功！");
							this.showData(1,this.pageInfo.pageSize,this.keyword)
						}
					});
				}).catch(()=>{
					console.log("cancel");
				});
			},
			handleCurrentChange(pageNum){
				this.showData(pageNum,this.pageInfo.pageSize,this.keyword);
			},
			handleSizeChange(pageSize){
				this.showData(1,pageSize,this.keyword);
				this.pageInfo.pageSize = pageSize;
			},
			insert(){
				this.goodsAdd=true;
				this.getAll();
			},
			getAll(){
				let url = "goods/getAll";
				axios.post(url).then(resp => {
					this.typeList = resp.data.data;
					console.log(this.typeList);
				});
			},
			handleSelectionChange(item){
				this.ids = item.map(o => o.id);
				this.idb = item.map(o => o.buyin);
			},
			batchDel(){
				this.$confirm("是否删除?","提示").then(()=>{
					let url = "goods/batchDel";
					axios.post(url,this.ids).then(resp => {
						if(resp.data.data > 0){
							this.$alert("删除成功!");
							this.showData(1,this.pageInfo.pageSize,this.keyword);
						}
					});
				}).catch(err=>{
					this.$alert(err);
				});
			},
			saveadd(){
				let url = "goods/insert";
				axios.post(url,this.addtype).then(resp => {
					console.log("cg");
				});
				this.goodsAdd = false;
				this.showData(this.pageInfo.pageNum,this.pageInfo.pageSize,this.keyword);
			},
			insertType(){
				this.goodsTypeAdd = true;
			},
			saveg(){
				let url = "goods/insertType";
				axios.post(url,this.gtype).then(resp =>{
					console.log("insert type cg");
				});
				this.goodsTypeAdd = false;
			},
			cancelg(){
				this.goodsTypeAdd=false;
			}
		},
		
	}
</script>

<style>
	.delAndPage{
		display: flex;
		margin-left: 20px;
	}
</style>